<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>修改预登记</span>
        <el-button style="float: right; margin-left: 10px; padding: 3px 0" type="text" @click="goBack">返回列表</el-button>
      </div>
      <pre-register-form 
        v-if="initialData" 
        ref="preRegisterForm" 
        :initial-data="initialData" 
        @submit="handleSubmit" 
        @cancel="goBack" 
      />
      <div v-else class="loading-container">
        <el-empty v-if="!loading" description="未找到数据"></el-empty>
        <div v-else class="loading-spinner">
          <i class="el-icon-loading"></i>
          <span>加载数据中...</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import PreRegisterForm from './components/PreRegisterForm'
import { getInfo, update } from "@/api/room/preregister";

export default {
  name: "EditPreRegister",
  components: {
    PreRegisterForm
  },
  data() {
    return {
      loading: false,
      submitting: false,
      initialData: null
    };
  },
  created() {
    this.getPreRegisterInfo();
  },
  activated() {
    // 当组件被激活时（包括从缓存中激活），重新获取数据
    if (this.$route.path.includes('/preregister/edit/')) {
      this.getPreRegisterInfo();
    }
  },
  methods: {
    // 获取预登记详情
    getPreRegisterInfo() {
      this.loading = true;
      const registerId = this.$route.params.id;
      if (!registerId) {
        this.$modal.msgError("无效的预登记ID");
        this.goBack();
        return;
      }
      
      getInfo(registerId).then(response => {
        if (response.code === 200) {
          this.initialData = response.data || {};
        } else {
          this.$modal.msgError(response.msg || "获取预登记信息失败");
          this.goBack();
        }
        this.loading = false;
      }).catch(error => {
        console.error("获取预登记信息失败:", error);
        this.$modal.msgError("获取信息失败");
        this.loading = false;
        this.goBack();
      });
    },
    handleSubmit(formData) {
      // 防止重复提交
      if (this.submitting) return;
      this.submitting = true;
      
      // 先获取最新数据，确认是否有变更
      getInfo(formData.registerId).then(response => {
        if (response.code === 200) {
          const latestData = response.data || {};
          
          // 检查数据是否已被他人修改（这里可以根据业务需求添加更详细的比较逻辑）
          if (latestData.updateTime && this.initialData.updateTime && 
              latestData.updateTime !== this.initialData.updateTime) {
            this.$modal.confirm("数据已被他人修改，是否刷新页面获取最新数据？").then(() => {
              this.initialData = latestData;
              this.submitting = false;
            }).catch(() => {
              // 用户选择不刷新，继续提交
              this.submitUpdate(formData);
            });
          } else {
            // 数据未发生变化，继续提交
            this.submitUpdate(formData);
          }
        } else {
          this.$modal.msgError(response.msg || "获取最新数据失败");
          this.submitting = false;
        }
      }).catch(error => {
        console.error("获取最新数据失败:", error);
        this.$modal.msgError("获取最新数据失败，请刷新页面后重试");
        this.submitting = false;
      });
    },
    // 执行更新操作
    submitUpdate(formData) {
      // 修改预登记
      update(formData).then(response => {
        this.submitting = false;
        if (response.code === 200) {
          this.$modal.msgSuccess("修改预登记成功");
          this.goBack();
        } else {
          this.$modal.msgError(response.msg || "修改失败");
        }
      }).catch(error => {
        console.error("修改预登记失败:", error);
        this.$modal.msgError("修改失败");
        this.submitting = false;
      });
    },
    goBack() {
      this.$router.push('/preregister');
    }
  }
};
</script>

<style scoped>
.loading-container {
  text-align: center;
  padding: 40px 0;
}
.loading-spinner {
  font-size: 16px;
}
.loading-spinner i {
  margin-right: 5px;
  font-size: 24px;
}
</style> 